<template>
  <div class="dashboard-container">
    <!-- 顶部导航栏 -->
    <header class="dashboard-header">
      <div class="header-content">
        <div class="logo-section">
          <div class="logo-icon">⭐</div>
          <span class="logo-text">Sparkie Interview</span>
        </div>
        
        <nav class="nav-menu">
          <a href="#" class="nav-item active">首页</a>
          <a href="#" class="nav-item" @click.prevent="navigateTo('/hr/interviews')">面试管理</a>
          <a href="#" class="nav-item" @click.prevent="navigateTo('/hr/question-bank')">题库</a>
          <a href="#" class="nav-item" @click.prevent="navigateTo('/hr/reports')">报告</a>
          <a href="#" class="nav-item">设置</a>
        </nav>
        
        <div class="user-section">
          <el-dropdown>
            <span class="user-avatar">
              <el-avatar :size="40">{{ user?.name?.charAt(0) || 'H' }}</el-avatar>
              <span class="user-name">{{ user?.name || 'HR 用户' }}</span>
              <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人设置</el-dropdown-item>
                <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </header>
    
    <!-- 主要内容区域 -->
    <main class="dashboard-main">
      <div class="dashboard-content">
        <!-- 页面标题 -->
        <div class="page-header">
          <h1 class="page-title">HR 仪表盘</h1>
          <p class="page-subtitle">管理面试流程，查看候选人表现</p>
        </div>
        
        <!-- 快捷操作卡片组 -->
        <div class="action-cards">
          <div class="action-card primary" @click="navigateTo('/hr/create-interview')">
            <div class="card-content">
              <div class="card-icon">
                <el-icon><Plus /></el-icon>
              </div>
              <h3 class="card-title">创建新面试</h3>
              <p class="card-description">设置面试流程和邀请候选人</p>
            </div>
          </div>
          
          <div class="action-card" @click="navigateTo('/hr/applications')">
            <div class="card-content">
              <div class="card-icon">
                <el-icon><User /></el-icon>
                <el-badge :value="newApplications" class="card-badge" v-if="newApplications > 0" />
              </div>
              <h3 class="card-title">申请管理</h3>
              <p class="card-description">查看和筛选候选人申请</p>
            </div>
          </div>
          
          <div class="action-card" @click="navigateTo('/hr/question-bank')">
            <div class="card-content">
              <div class="card-icon">
                <el-icon><Document /></el-icon>
              </div>
              <h3 class="card-title">管理题库</h3>
              <p class="card-description">编辑和组织面试题目</p>
            </div>
          </div>
          
          <!-- <div class="action-card" @click="navigateTo('/hr/reports')">
            <div class="card-content">
              <div class="card-icon">
                <el-icon><DataAnalysis /></el-icon>
                <el-badge :value="pendingReports" class="card-badge" v-if="pendingReports > 0" />
              </div>
              <h3 class="card-title">候选人报告</h3>
              <p class="card-description">查看评估结果和分析</p>
            </div>
          </div> -->
          
          <div class="action-card" @click="navigateTo('/hr/statistics')">
            <div class="card-content">
              <div class="card-icon">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <h3 class="card-title">面试统计</h3>
              <p class="card-description">查看面试数据和趋势</p>
            </div>
          </div>
        </div>
        
        <!-- 数据概览仪表盘 -->
        <div class="overview-section">
          <div class="overview-card">
            <h3 class="overview-title">本周面试概况</h3>
            <div class="chart-container">
              <el-progress
                type="circle"
                :percentage="weeklyProgress"
                :width="120"
                :stroke-width="8"
                color="#6753C0"
              />
              <div class="chart-info">
                <span class="chart-number">{{ completedInterviews }}/{{ totalInterviews }}</span>
                <span class="chart-label">已完成面试</span>
              </div>
            </div>
          </div>
          
          <div class="overview-card">
            <h3 class="overview-title">候选人状态分布</h3>
            <div class="status-chart">
              <div class="status-item">
                <div class="status-dot passed"></div>
                <span class="status-label">通过</span>
                <span class="status-count">{{ candidateStats.passed }}</span>
              </div>
              <div class="status-item">
                <div class="status-dot pending"></div>
                <span class="status-label">待评估</span>
                <span class="status-count">{{ candidateStats.pending }}</span>
              </div>
              <div class="status-item">
                <div class="status-dot rejected"></div>
                <span class="status-label">未通过</span>
                <span class="status-count">{{ candidateStats.rejected }}</span>
              </div>
            </div>
          </div>
          
          <div class="overview-card">
            <h3 class="overview-title">通过率趋势</h3>
            <div class="trend-chart">
              <div class="trend-number">{{ passRate }}%</div>
              <div class="trend-change" :class="{ positive: trendChange > 0, negative: trendChange < 0 }">
                <el-icon v-if="trendChange > 0"><ArrowUp /></el-icon>
                <el-icon v-else><ArrowDown /></el-icon>
                <span>{{ Math.abs(trendChange) }}%</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 最近候选人 -->
        <div class="recent-section">
          <div class="section-header">
            <h3 class="section-title">最近候选人</h3>
            <el-button type="primary" link @click="navigateTo('/hr/reports')">
              查看全部
            </el-button>
          </div>
          
          <div class="candidates-list">
            <div 
              v-for="candidate in recentCandidates" 
              :key="candidate.id"
              class="candidate-item"
              @click="navigateTo(`/hr/evaluation/${candidate.id}`)"
            >
              <el-avatar :src="candidate.avatar" :size="48" class="candidate-avatar">
                {{ candidate.name.charAt(0) }}
              </el-avatar>
              <div class="candidate-info">
                <h4 class="candidate-name">{{ candidate.name }}</h4>
                <p class="candidate-position">{{ candidate.position }}</p>
                <span class="candidate-date">{{ formatDate(candidate.interviewDate) }}</span>
              </div>
              <el-tag 
                :type="getStatusType(candidate.status)"
                class="candidate-status"
              >
                {{ getStatusText(candidate.status) }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { 
  Plus, 
  Document, 
  DataAnalysis, 
  TrendCharts, 
  ArrowDown,
  ArrowUp,
  User
} from '@element-plus/icons-vue'

export default {
  name: 'HRDashboard',
  components: {
    Plus,
    Document,
    DataAnalysis,
    TrendCharts,
    ArrowDown,
    ArrowUp,
    User
  },
  setup() {
    const router = useRouter()
    const authStore = useAuthStore()
    
    // 响应式数据
    const recentCandidates = ref([
      {
        id: 1,
        name: '张三',
        position: '前端开发工程师',
        interviewDate: '2024-01-15',
        status: 'passed',
        avatar: ''
      },
      {
        id: 2,
        name: '李四',
        position: '后端开发工程师',
        interviewDate: '2024-01-14',
        status: 'pending',
        avatar: ''
      },
      {
        id: 3,
        name: '王五',
        position: 'UI/UX 设计师',
        interviewDate: '2024-01-13',
        status: 'rejected',
        avatar: ''
      }
    ])
    
    const candidateStats = ref({
      passed: 12,
      pending: 5,
      rejected: 3
    })
    
    const completedInterviews = ref(8)
    const totalInterviews = ref(12)
    const passRate = ref(75)
    const trendChange = ref(5)
    const newApplications = ref(3) // 新申请数量
    
    // 计算属性
    const user = computed(() => authStore.user)
    const pendingReports = computed(() => candidateStats.value.pending)
    const weeklyProgress = computed(() => {
      return Math.round((completedInterviews.value / totalInterviews.value) * 100)
    })
    
    // 方法
    const navigateTo = (path) => {
      router.push(path)
    }
    
    const handleLogout = async () => {
      await authStore.logout()
      router.push('/login')
    }
    
    const formatDate = (date) => {
      return new Date(date).toLocaleDateString('zh-CN', {
        month: 'short',
        day: 'numeric'
      })
    }
    
    const getStatusType = (status) => {
      const statusMap = {
        'passed': 'success',
        'pending': 'warning',
        'rejected': 'danger'
      }
      return statusMap[status] || 'info'
    }
    
    const getStatusText = (status) => {
      const statusMap = {
        'passed': '通过',
        'pending': '待评估',
        'rejected': '未通过'
      }
      return statusMap[status] || '未知'
    }
    
    // 生命周期
    onMounted(() => {
      // 加载仪表盘数据
      console.log('HR仪表盘加载完成')
    })
    
    return {
      user,
      recentCandidates,
      candidateStats,
      completedInterviews,
      totalInterviews,
      passRate,
      trendChange,
      newApplications,
      pendingReports,
      weeklyProgress,
      navigateTo,
      handleLogout,
      formatDate,
      getStatusType,
      getStatusText
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  min-height: 100vh;
  background-color: var(--bg-light);
}

.dashboard-header {
  background: white;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  max-width: 1200px;
  margin: 0 auto;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  font-size: 24px;
  color: var(--primary-color);
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.nav-menu {
  display: flex;
  gap: 32px;
}

.nav-item {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-item:hover,
.nav-item.active {
  color: var(--primary-color);
}

.user-section {
  display: flex;
  align-items: center;
}

.user-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.dropdown-icon {
  font-size: 12px;
  color: var(--text-secondary);
}

.dashboard-main {
  padding: 24px;
}

.dashboard-content {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 32px;
}

.page-title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.page-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
}

.action-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.action-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.action-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.action-card.primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
}

.card-content {
  padding: 24px;
  text-align: center;
  position: relative;
}

.card-icon {
  font-size: 2rem;
  margin-bottom: 16px;
  position: relative;
}

.card-badge {
  position: absolute;
  top: -8px;
  right: -8px;
}

.card-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: inherit;
}

.card-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.action-card.primary .card-description {
  color: rgba(255, 255, 255, 0.9);
}

.overview-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.overview-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.overview-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.chart-info {
  text-align: center;
}

.chart-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.chart-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.status-chart {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.status-dot.passed {
  background-color: var(--success-color);
}

.status-dot.pending {
  background-color: var(--warning-color);
}

.status-dot.rejected {
  background-color: var(--error-color);
}

.status-label {
  flex: 1;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.status-count {
  font-weight: 600;
  color: var(--text-primary);
}

.trend-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.trend-number {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.trend-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  font-weight: 500;
}

.trend-change.positive {
  color: var(--success-color);
}

.trend-change.negative {
  color: var(--error-color);
}

.recent-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.candidates-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.candidate-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.candidate-item:hover {
  border-color: var(--primary-color);
  background-color: rgba(103, 83, 192, 0.05);
}

.candidate-avatar {
  margin-right: 16px;
}

.candidate-info {
  flex: 1;
}

.candidate-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.candidate-position {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.candidate-date {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.candidate-status {
  margin-left: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }
  
  .header-content {
    padding: 0 16px;
  }
  
  .dashboard-main {
    padding: 16px;
  }
  
  .action-cards {
    grid-template-columns: 1fr;
  }
  
  .overview-section {
    grid-template-columns: 1fr;
  }
  
  .candidate-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .candidate-status {
    margin-left: 0;
  }
}
</style> 